<template>
  <el-dialog class="public-dialog" title="批量提取订单信息" width="960" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <label>订单信息：</label>
      <el-select v-model="formData.select" placeholder="请选择" style="width: 240px">
        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
        </el-option-group>
      </el-select>

      <el-button type="primary" @click="query" class="ml-[8px]">提取</el-button>
    </div>
    <div class="box">
      <p v-for="(i, k) in tableData" :key="k">
        {{ i }}
      </p>
    </div>
    <div class="text-right mt-2">已提取{{ tableData.length }}条</div>
    <template #footer >
      <el-button type="primary" @click="onCopy"> 全部复制 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
const props = defineProps({})
const modelValue = ref(false)
const emit = defineEmits([])
const formData = ref({ select: "" })
const value = ref("")
const options = [
  {
    label: "订单",
    options: [
      { label: "系统订单号", value: "order_sn" },
      { label: "平台订单号", value: "platform_order_sn" },

      { label: "产品SKU", value: "sku" },
      { label: "渠道SKU", value: "platform_sku" },
      { label: "自定义SKU", value: "custom_sku" },

      { label: "客户邮箱", value: "recipient.recipient_email" },
    ],
  },
  {
    label: "平台",
    options: [{ label: "产品ASIN", value: "asin" }],
  },
  {
    label: "物流维度",
    options: [
      { label: "标记发货追踪号", value: "logistics.tracking_number" },
      { label: "真实追踪号", value: "logistics.real_track_no" },
      { label: "物流商单号", value: "logistics.logistics_bill_num" },
      { label: "物流转单号", value: "logistics.logistics_transfer_num" },
      { label: "海外仓出库单号", value: "logistics.overseas_wms_out_number" },
    ],
  },
]
const query = () => {
  console.log(formData.value.select)
  if ("sku,platform_sku,custom_sku,asin".includes(formData.value.select)) {
    tableData.value = rowsList.value.map((v) => v?.items?.map((d) => d?.[formData.value.select]))?.flat()?.filter(Boolean)
  } else {
    tableData.value = getFields(rowsList.value, formData.value.select)?.filter(Boolean)
  }
}

const getFields = (list, field) => {
  let data = []
  let fields = field?.split(".")
  let getObjKeys = (data) => {
    return fields.reduce((pre, cur) => pre[cur], data)
  }
  list.forEach((item) => {
    data.push(getObjKeys(item, fields))
  })
  return data
}

import { copy } from "@/utils"
const onCopy = () => {
  copy(tableData.value.join("\n"))
}

const tableData = ref([])
const rowsList = ref([])
const open = (rows) => {
  modelValue.value = true
  rowsList.value = rows
}
const handleClose = (refresh) => {
  modelValue.value = false
  rowsList.value = []
  tableData.value = []
  formData.value.select = ""
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.box {
  line-height: 22px;
  height: 420px;
  overflow-y: auto;
  padding: 4px 10px;
  margin-top: 8px;
  box-shadow: 0px 0px 10px 1px #eff3fe;
}
</style>
